<template>
  <el-card>
    <el-button @click="$router.push('/workflow/create')" icon="Plus" type="primary" size="large">
      {{ t('formDemo.add') }}
    </el-button>
    <div class="collapse workflow-definition-collapse">
      <el-collapse v-model="activeNames" :accordion="false">
        <el-collapse-item v-for="(workflowDictoryKey) in workflowDictoryKeys" :key="workflowDictoryKey"
          :title="workflowDictoryKey" :name="workflowDictoryKey">
          <div class="work-list">
            <template v-for="item in workflowDictory[workflowDictoryKey]" :key="item.id">
              <el-popover placement="top-start" :width="245" trigger="click">
                <template #reference>
                  <el-card class="w-item">
                    <div class="w-item-container">
                      <div class="w-item-icon">
                        <el-icon :size="50" :color="item.color">
                          <component :is="item.icon"></component>
                        </el-icon>
                      </div>
                      <div class="w-item-title">{{ item.title }}</div>
                    </div>
                  </el-card>
                </template>
                <el-button size="small" type="success" icon="CaretRight"
                  @click="showStartWorkflowBox(item)">发起</el-button>
                <el-button size="small" type="primary"
                  @click="$router.push(`/workflow/update/${item.id}?version=${item.version}`)"
                  icon="Edit">编辑</el-button>
                <el-button size="small" type="danger" icon="Delete" @click="deleteWorkflow(item.id)">删除</el-button>
              </el-popover>
            </template>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </el-card>
  <Show :visible="showStartWorkflow">
    <StartWorkflow v-model="showStartWorkflow" :workflow="currentSelectedRow" title="流程申请" max-height="650px"
      @update:refresh="refresh"></StartWorkflow>
  </Show>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useI18n } from '@/hooks/web/useI18n';
import type { WorkflowListOutput } from '@/utils/api/workflow/list/type';
import { getAllWithGroupAsync, deleteAsync } from '@/utils/api/workflow/list';
import { Show } from '@/components/show/index';
import StartWorkflow from './start-workflow.vue';
import type { WorkflowDefinition } from '@/utils/api/workflow/definition/type';
import { ElMessage, ElMessageBox } from 'element-plus';
const { t } = useI18n();
// 工作流展开名称
const activeNames = ref<string[]>([]);
// 工作流分组名称集合
const workflowDictoryKeys = ref<string[]>([]);
// 工作流分组数据
const workflowDictory = ref<WorkflowListOutput>({});
// 组件挂载完成
onMounted(async () => {
  await init();
});
// 查询工作流分组数据
const getWorkflowDictoryAsync = async () => {
  return await getAllWithGroupAsync({ skipCount: 0, maxResultCount: 999 });
};

// 是否显示detail dialogVisible
let showStartWorkflow = ref(false);
let currentSelectedRow = ref<WorkflowDefinition>({
  id: '',
  title: '',
  version: 1,
  description: '',
  icon: '',
  color: 'rgba(255, 69, 0, 0.68)',
  group: '',
  inputs: [],
  nodes: []
});

// 发起流程
const showStartWorkflowBox = (item: WorkflowDefinition) => {
  currentSelectedRow.value = JSON.parse(JSON.stringify(item));
  showStartWorkflow.value = true;
};

// 删除
const deleteWorkflow = async (id: string) => {
  ElMessageBox.confirm('您确定删除吗', '提醒', {
    confirmButtonText: '删除',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    await deleteAsync(id);
    ElMessage.success('删除成功');
    await init();
  });
};

const init = async () => {
  // 加载所有字典数据
  workflowDictory.value = await getWorkflowDictoryAsync();
  // 获取所有分组名称
  workflowDictoryKeys.value = Object.keys(workflowDictory.value);
  // 展开所有分组
  activeNames.value = [...workflowDictoryKeys.value];
};

// 刷新
const refresh = async () => {
  await init();
};

// 编辑功能
</script>
<style scoped lang="scss">
.collapse {
  margin-top: 10px;

  .work-list {
    padding: 10px;

    .operator {
      list-style: none;
      /* 移除默认的项目符号 */
      padding: 0;
      /* 移除默认的内边距 */
      text-align: center;
      /* 可选，如果需要整体居中 */
    }

    .w-item {
      display: inline-block;
      margin-left: 20px;
      cursor: pointer;
      width: 220px;

      .w-item-container {
        /* 保证容器为一个块级元素并允许其内部内容居中 */
        display: flex;
        justify-content: flex-start;
        align-items: center;

        /* 如果需要，可以设置容器的宽度和高度，确保有足够的空间进行居中 */
        width: 100%;
        /* 或具体的像素值 */
        height: 100%;
        /* 或具体的像素值 */

        .w-item-icon {
          flex: 1;
        }

        .w-item-title {
          flex: 2;
        }
      }
    }

    .w-item:hover {
      box-shadow:
        0 1px 2px -2px rgba(0, 0, 0, 0.16),
        0 3px 6px 0 rgba(0, 0, 0, 0.12),
        0 5px 12px 4px rgba(0, 0, 0, 0.09);
    }
  }
}
</style>

<style lang="scss">
.workflow-definition-collapse {
  button {
    padding-left: 15px;
    background-color: rgb(247, 247, 247);
  }
}
</style>
